<template>
    <div class="msg-item">
        <div class="time-div" v-if="time">{{time}}</div>
        <div v-if="isMe" class="right-con">
            <div class="info">
                <div class="name">{{name}}</div>
                <div class="text-msg" v-if="type == 'text'">{{content}}</div>
                <img class="img-msg" v-if="type == 'img'" :src="content" />
                <div class="audio-msg" v-if="type == 'audio'">
                    <div class="audio-time">1"</div> 
                    <img src="@/assets/img/weLiao/audio.png" class="audio-img">
                </div>
                <video class="video-msg" v-if="type == 'video'" :src="content"
                    playsinline webkit-playsinline width="100%" height="100%"
                    controls
                    controlslist="nodownload  noremoteplayback"
                    oncontextmenu = "return false"
                    disablePictureInPicture = "true"
                ></video>
            </div>
            <img :src="defaultHead" class="head-img" alt="">
        </div>
        <div v-else>
            <img :src="defaultHead" class="head-img" alt="">
            <div class="info">
                <div class="name">{{name}}</div>
                <div class="text-msg" v-if="type == 'text'">{{content}}</div>
                <img class="img-msg" v-if="type == 'img'" :src="content" />
                <div class="audio-msg" v-if="type == 'audio'">
                    
                    <img src="@/assets/img/weLiao/audio.png" class="audio-img">
                    <div class="audio-time">1"</div> 
                </div>
                <video class="video-msg" v-if="type == 'video'" :src="content"
                    playsinline webkit-playsinline width="100%" height="100%"
                    controls
                    controlslist="nodownload  noremoteplayback"
                    oncontextmenu = "return false"
                    disablePictureInPicture = "true"
                ></video>
            </div>
        </div>
        
    </div>
</template>
<script>
export default {
    props: {
        name: {
            type: String,
            default: '我'
        },
        type: {
            type: String,
            default: 'text'
        },
        isMe: {
            type: Boolean,
            default: false
        },
        content: {
            type: String,
            default: ''
        },
        time: {
            type: String,
            default: ''
        }
    },
    data () {
        return {
            defaultHead: require('@/assets/img/weLiao/default_head.png')
        }
    }
}
</script>
<style scoped>
.msg-item{
    padding: 0.26rem;
}
.right-con{
    text-align: right;
}
.head-img{
    display: inline-block; vertical-align: top;
    width: 0.78rem; height: 0.78rem;
}
.info{
    display: inline-block; vertical-align: top;
    padding:  0 0.18rem;
}

.name{
    font-size: 0.24rem; color: #777; padding: 0 0 0.1rem 0;
}
.time-div{
    display: inline-block;
    padding:0.1rem 0.2rem; background: #CECECE; color: #fff;
    text-align: center; font-size: 0.2rem; border-radius: 0.2rem;
    position: relative;
    left: 50%;
    transform: translateX(-50%);

}
.text-msg{
    padding: 0.24rem; background: #fff; font-size: 0.32rem; color: #000;
    border-radius: 0 0.2rem 0.2rem 0.2rem; max-width: 4.69rem;
    word-break: break-all;
}
.right-con .text-msg{
    text-align: left; background: #A9E2FF !important;
    border-radius: 0.2rem 0  0.2rem 0.2rem !important;
}

.img-msg{
    max-width: 4.69rem; max-height: 2.5rem; 
    border-radius: 0 0.2rem 0.2rem 0.2rem;
}
.right-con .img-msg{
    border-radius: 0.2rem 0 0.2rem 0.2rem !important;
}
.audio-msg{
    padding: 0.24rem; background: #fff; font-size: 0.32rem; color: #000;
    border-radius: 0 0.2rem 0.2rem 0.2rem; max-width: 4.69rem;
    
}
.right-con .audio-msg{
    text-align: left; background: #A9E2FF !important;
    border-radius: 0.2rem 0  0.2rem 0.2rem !important;
    
}
.audio-img{
    display: inline-block; vertical-align: middle;
    width: 0.22rem; height: 0.31rem;
    transform: rotateZ(180deg);
}
.right-con .audio-img {
    transform: rotateZ(0deg) !important;
}


.audio-time{
    display: inline-block; vertical-align: middle;
}
.video-msg{
    max-width: 4.69rem; max-height: 2.5rem; 
    border-radius: 0 0.2rem 0.2rem 0.2rem;
}
.right-con .video-msg{
     border-radius: 0.2rem 0 0.2rem 0.2rem !important;
}
</style>
